<script setup>
import { reactive, ref } from 'vue'
import { login } from '@/api/user.js'
import router from '@/router/index.js'
import { ElMessage } from 'element-plus'

const userForm = reactive({
  username: '',
  password: '',
})

const ruleFormRef = ref()

const rules = reactive({
  username: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 16, message: 'Length should be 3 to 16', trigger: 'change' },
  ],
  password: [
    { required: true, message: 'Please input Activity password', trigger: 'blur' },
    { min: 5, max: 16, message: 'Length should be 5 to 16', trigger: 'blur' },
  ],
})

function submitForm(form) {
  login(form.username, form.password).then((response) => {
    if (response.code === 0) {
      ElMessage.success(response.msg)
      localStorage.setItem('token', response.data.token)
      localStorage.setItem('username', form.username)
      router.push('/')
    }
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>
        <el-form ref="ruleFormRef" :model="userForm" :rules="rules" status-icon label-width="auto">
          <el-form-item label="用户" prop="user">
            <el-input v-model.number="userForm.username" />
          </el-form-item>

          <el-form-item label="密码" prop="pass">
            <el-input v-model="userForm.password" type="password" autocomplete="off" />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm(userForm)"> Submit</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-aside width="200px">Aside</el-aside>
    </el-container>
  </div>
</template>

<style scoped></style>
